import React from 'react';
import styled from 'styled-components';
import { Position } from '../utils/gameUtils';
import Heart from './Heart';

interface SnakeProps {
  segments: Position[];
  color: string;
  gridSize: number;
}

const SnakeSegment = styled.div<{ position: Position; color: string; size: number }>`
  position: absolute;
  left: ${props => props.position.x}px;
  top: ${props => props.position.y}px;
  width: ${props => props.size}px;
  height: ${props => props.size}px;
  background-color: ${props => props.color};
  border-radius: 50%;
`;

const Snake: React.FC<SnakeProps> = ({ segments, color, gridSize }) => {
  if (segments.length === 0) return null;

  return (
    <>
      <Heart
        position={segments[0]}
        size={gridSize}
        color={color}
      />
      {segments.slice(1).map((segment, index) => (
        <SnakeSegment
          key={index}
          position={segment}
          color={color}
          size={gridSize}
        />
      ))}
    </>
  );
};

export default Snake; 